<!-- home -->
<template>
  <div class="container">
    <van-nav-bar
      title="计划制定"
      class="navclass"
      left-arrow
      left-text="返回"
      @click-left="doback"
    />

    <van-cell title="填报人：" v-model="ywyname" />

    <van-cell title="选择月份" required v-model="date" @click="onDisplay" is-link />

 <!--   <van-calendar v-model="dateshow" @close="onClose" @confirm="onConfirm" :show-confirm="kjflag"  :min-date="minDate"/>-->

    <van-popup v-model="dateshow" round position="bottom" :style="{ height: '50%' }" >
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="onConfirmNy"
        @cancel="oncancel"
      />
    </van-popup>

    <van-field
      v-model="firstTaskNum"
      label="1-8号业绩目标(元):"
      label-width	="50%"
      placeholder="请输入金额(元)"
      type="digit"
      required
      @input="onChangeTaskNum1"
    />
    <van-field
      v-model="secondTaskNum"
      label="9-15号业绩目标(元):"
      placeholder="请输入金额(元)"
      type="digit"
      required
      label-width	="50%"
      @input="onChangeTaskNum2"
    />
    <van-field
      v-model="thirdTaskNum"
      label="16-23号业绩目标(元):"
      placeholder="请输入金额(元)"
      type="digit"
      required
      label-width	="50%"
      @input="onChangeTaskNum3"
    />
    <van-field
      v-model="fourthTaskNum"
      label="24号至月底业绩目标(元):"
      placeholder="请输入金额(元)"
      type="digit"
      required
      label-width	="50%"
      @input="onChangeTaskNum4"
    />

    <van-field
      v-model="zje"
      label="目标总金额(元):"
      placeholder="目标金额(元)"
      type="digit"
      required
      label-width	="50%"
      disabled
    />

    <div  class="btn" >
      <van-button type="info" size="large" round @click="doSubmit" >提交</van-button>
    </div>

  </div>
</template>

<script>

import { Dialog, Toast, Grid, GridItem, Calendar, Cell, DatetimePicker } from 'vant'
import { floatAdd, floatSub, floatMul, floatDiv } from '../../utils/NumberUtil'
import { addBusitask, updateBusitask } from '../../api/api'

export default {
  name: 'AddTask',
  data() {
    return {
      companyListFront: [],
      companyList1: [],
      platformProductCategory: [],
      platformCategory: '',
      productList: [],
      pageNum: 1,
      pageSize: 10,
      date: '',
      currentDate: new Date(),
      show: false,
      kjflag: false,
      showfblx: false,
      showspdl: false,
      ywlxname: '',
      ywlx: '',
      dateshow: false,
      actions: [],
      dkactions: [],
      dklxname: '',
      dklx: '',
      dklxshow: false,
      minDate: new Date(2020, 1, 1),
      maxDate: new Date(2029, 12, 31),
      zje: 0,
      ywyname: '',
      firstTaskNum: '',
      secondTaskNum: '',
      thirdTaskNum: '',
      fourthTaskNum: '',
      taskid: ''
    }
  },

  created() {
    this.ywyname = this.$store.getters.userName
    const item = this.$route.query.item
    console.log('已填报')
    console.log(item)
    if (item) {
      this.taskid = item.taskid
      this.zje = item.tasknum
      this.date = item.ssyf
      this.firstTaskNum = item.firstTaskNum
      this.secondTaskNum = item.secondTaskNum
      this.thirdTaskNum = item.thirdTaskNum
      this.fourthTaskNum = item.fourthTaskNum
      var str = item.ssyf + '' + '01'
      this.currentDate = new Date(str.substring(0, 4) + '-' + str.substring(5, 6) + '-' + str.substring(7, 8))
    }
  },
  mounted() {

  },

  methods: {

    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },

    addyj() {
      this.$router.push({ path: '/addyj', query: {}})
    },

    onDisplay() {
      this.dateshow = true
    },
    onClose() {
      this.show = false
    },

    onConfirm(event) {
      this.dateshow = false
      this.date = this.formatDate(event)
    },

    formatDate(date) {
      const date1 = new Date(date)
      return `${date1.getFullYear()}/${date1.getMonth() + 1}/${date1.getDate()}`
    },

    doSubmit() {
      if (!this.date) {
        Toast.fail('请选择月份')
        return
      }

      if (!this.zje) {
        Toast.fail('请填写目标金额')
        return
      }

      const taskid = this.taskid
      if (taskid) {
        const param = { taskid: this.taskid, ssyf: this.date, tasknum: this.zje, firstTaskNum: this.firstTaskNum, secondTaskNum: this.secondTaskNum, thirdTaskNum: this.thirdTaskNum, fourthTaskNum: this.fourthTaskNum }
        updateBusitask(param).then(response => {
          if (response.code === 200) {
            Dialog.alert({
              title: '',
              message: '修改成功'
            }).then(() => {
              // on close
              this.$router.go(-1) // 返回上一层
            })
          } else {
            Toast.fail(response.msg)
          }
        })
      } else {
        const param = { ssyf: this.date, tasknum: this.zje, firstTaskNum: this.firstTaskNum, secondTaskNum: this.secondTaskNum, thirdTaskNum: this.thirdTaskNum, fourthTaskNum: this.fourthTaskNum }
        addBusitask(param).then(response => {
          if (response.code === 200) {
            Dialog.alert({
              title: '',
              message: '提交成功'
            }).then(() => {
              // on close
              this.$router.go(-1) // 返回上一层
            })
          } else {
            Toast.fail(response.msg)
          }
        })
      }
    },

    doback() {
      this.$router.go(-1) // 返回上一层
    },

    onConfirmNy(event) {
      console.log(event)
      var year = event.getFullYear() + ''
      var month = (event.getMonth() + 1) + ''
      var date = year + (month < 10 ? '0' : '') + month
      this.date = date
      this.dateshow = false
    },

    oncancel() {
      this.dateshow = false
    },

    onChangeTaskNum1(value) {
      let zje = 0
      // let firstTaskNum = this.firstTaskNum
      const secondTaskNum = parseFloat(this.secondTaskNum)
      const thirdTaskNum = parseFloat(this.thirdTaskNum)
      const fourthTaskNum = parseFloat(this.fourthTaskNum)
      zje = floatAdd(parseFloat(value), floatAdd(floatAdd(secondTaskNum, thirdTaskNum), fourthTaskNum))
      this.zje = zje
    },

    onChangeTaskNum2(value) {
      let zje = 0
      const firstTaskNum = this.firstTaskNum
      // let secondTaskNum = parseFloat(this.secondTaskNum)
      const thirdTaskNum = parseFloat(this.thirdTaskNum)
      const fourthTaskNum = parseFloat(this.fourthTaskNum)
      zje = floatAdd(parseFloat(value), floatAdd(floatAdd(firstTaskNum, thirdTaskNum), fourthTaskNum))
      this.zje = zje
    },

    onChangeTaskNum3(value) {
      let zje = 0
      const firstTaskNum = this.firstTaskNum
      const secondTaskNum = parseFloat(this.secondTaskNum)
      // let thirdTaskNum = parseFloat(this.thirdTaskNum)
      const fourthTaskNum = parseFloat(this.fourthTaskNum)
      zje = floatAdd(parseFloat(value), floatAdd(floatAdd(firstTaskNum, secondTaskNum), fourthTaskNum))
      this.zje = zje
    },

    onChangeTaskNum4(value) {
      let zje = 0
      const firstTaskNum = this.firstTaskNum
      const secondTaskNum = parseFloat(this.secondTaskNum)
      const thirdTaskNum = parseFloat(this.thirdTaskNum)
      // let fourthTaskNum = parseFloat(this.fourthTaskNum)
      zje = floatAdd(parseFloat(value), floatAdd(floatAdd(firstTaskNum, secondTaskNum), thirdTaskNum))
      this.zje = zje
    }

  }
}
</script>
<style lang="scss" scoped>

  .container{
    width: 100%;
    height: calc(100vh);
    background-color: white;
  }

  .navclass{
    background-color:#f8f8f8;
  }

  .btn{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 30px;
    background-color: white;
    padding-bottom: 150px;
  }

</style>
